=====================封装函数，什么时候需要参数，什么时候需要返回return=================================
1.函数内，莫格之自己内部不能确定/每次函数调用都不一样，必须留好形参让外传入
2.函数调用处（外面）需要函数内处理后结果，必须return出去

================================ 旭哥的经验:================================================
 写需求的(代码)套路
1 明确需求，明确目标 ，你要知道做完的效果是什么 想要什么
// 例如 我要做登录 ，最终结果 ，输入账号密码 点击登录 提示登录成功
// 2 html+css->要的页面先准备一下 ，不要管js和功能 铺页面
// 3 铺数据/改数据 -> 微调页面文字 ，有数据要请求铺设到页面上
// 4 js 入场编写交互功能(小步一个个小功能实现)->逻辑(前端先做好)
// 5 如果需要调用接口 在和后端配合 调用ajax->请求

===============================return什么时候使用=============================================
内部运行后的结果给外面，
高级用法叫回调函数，return不出去，可能会用回调函数往外带值
调用次函数的地方，不需要内部的结果，就不用return

==============================（知识点1）==============================================
axios默认会把data（请求体）参数对象专场JSON字符串发给后台
自己携带请求头Content-Type:application/json

==============================（知识点2）==============================================
nodejs+webpack下的环境变量
 process.eng--->nodejs环境下的内置全局变量（任意使用）
 效果:获取敲击命令，执行时的“环境变量”
 yarn dev（开发环境启动）process.env上会被nodejs+webpack挂载. env.development文件里的变量值到这个了
year build:prod（打包准备放入生产环境） process.env上会被挂载，env.production文件里的变量值到这里
作用:根据敲击明了，自动加载对应不同的环境变量，开发时是一个基地址，上线时是一个基地址

==============================（知识点3）==============================================
 知识点:浏览器上面的标题设置文字，如同index,html中的title标签作用
  title静态标签的，  document.title在js代码运行的时候可以动态修改

==============================（知识点4）==============================================
知識點:next()裏有路徑，就會再次發生一次路由跳轉，路由守衛會從頭在重新執行一邊

2022-01-10小结
登入
1.html+css
2.修改数据，修改变量名，修改校验规则（封装validaMobile方法）
3.绑定点击事件，js兜底校验，数据都再loginForm对象里
4.打开接口文档，找到登入接口
4.0 。env。development修改基地地址
4.1 api/user.js，封装登录接口，对比文档写下接口参数
4.2 导入loginAPI方法登录页面，登录点击事件接口

***********************************************************************************************************************************************************
// 2021/1/11
==============================（知识点5）==============================================
知识点:什么是跨域？
1.跨域是“浏览器 ”对“ajax“做出的同源策略限制
同源策略是什么？
1.同源指的是，网页在浏览器打开时，地址栏里的地址中的协议，域名，端口和内嵌的ajax请求的url地址中的协议，域名，，端口有一个对不上就跨域了
注意点:服务器和服务器之间的请求是没有跨域限制的。
如何解决跨域问题？
方式1:jsonp
注意：jsonp和json没有关系，JSON是一种序列化数据的技术，JSONP是解决跨域技术的
使用:script标签的src属性，来发送请求而且不受跨域显示，请求后让后台返回一个函数调用 字符串+数据，在前端进入script标签之间，当做js代码执行，把水带回来
特点：需要前端传递一个方法名，后端返回函数调用格式的字符串
要求:前端和后端同时支持

方式2：cors
概念：跨域资源共享，现代浏览器前端默认支持的，但是还需要后端开启才行
使用：cors是让后端进行设置
特点：你可以在响应头看看有没有一个叫“Access-Control-Allow-Origin"字段（是后台设置的，作用：允许那些源进行跨域访问）
要求：前端什么都不用做，正常使用axios发送ajax请求，只需要后端开启（前端无需感知）

方式3：代理服务器
针对：后端不开跨域支持，我么前端自己用代理服务器也能拿到数据
原理：前端代理服务器，请求后端接口服务器，因为服务器之间没有跨域限制
好在：vue脚手架有一个webpack开发服务器支持，给这个服务器进行配置，让他支持代理装
1.让axios请求，不要直接请求外联地址（http开头的）有，而是要请求/开头，代表当前所在服务器(http://localhost:9528)
 2. 配置代理转发的规则, vue.config.js中devServer的proxy选项内配置(让开发服务器支持代理转发)
前提: 后端真的有"接口地址"可以使用, 才能用ajax请求 (前后端分离的项目)

 特殊: 后端渲染的项目(SSR/nuxt.js技术->新学vue语法), 数据在后端渲染完毕返回给前端网页不用你使用ajax请求

********************************************************************************************************************************************************************
2022/1/12
==============================（知识点6）==============================================
知识点：native使用
前提：组件身上绑定“原生名字”事件，凡是组件身上虽然是原生，但是都需要组件内$this.$emit触发才支持
如果组件内不支持这个原生名字的时间
解决：我们就可以个组件的@原生名字事件.native 告诉vue给他绑定成原生的事件，而不是自定义事件

========================================================================================
回调地狱
异步请求,ajax/axios都会有回调函数onload/then（）里函数体，在回调函数里那结果
拿到结果以后，在这个函数体里，在此发送请求，又会有一个函数体嵌入这里，继续嵌套请求+回调函数。。。嵌套下去
形成了回调地狱

==========================================================================================
vue组件样式相关
1运行时，选中标签，看右侧的style里样式被划线划掉了，优先级不够（权限）
2./deep/选中组件内的选择器，如果看右侧style样式类名已经上去了，证明已经选中了跟/deep/没啥关系，如果发现类名写了，但是没上去，运行时选择器没有
宣导组件内类名（/deep/）
3.svg要用fill属性填充图片颜色，而不能用style影响颜色

************************************************************************************************************************************************************************
2022/1/14
需求主要思路
1.听到需求描述，脑子有没有项目的运行画面，知不知道要什么效果，
2.细化细分步骤123（越详细越好，写注释）把思路转换代码 多写注释+多仿写代码

**********************************************************************************************************************************************************************
封装
好处：方便以后替换，方便复用，固定的值放在统一位置管理
最后：逻辑页面不出现固定的文字/数字   ====封装到一个统一的js文件使用
有自然语言的意思的值（可能会频繁变化的）

==============================（知识点7）==============================================
v-model是Vue的指令（语法糖）
<标签 v-model=“vue变量”></标签>
作用：实现数据双向绑定
双向：当前标签的value属性和vue变量双向绑定到一起
v-model运行时，会给当前标签添加：value=：vue变量“ 还会给当前标签绑定@input事件，把事件的值赋予给vue变量
本质：<标签：value=“vue变量：@input=”（值）=>vue变量=值”>
问题：除了在表单标签上用v-model，自定义组件身上是否可以使用v-model
可以....但是需要组件内定义props：必须叫value，内部监测输入框改变，必须触发$emit('input'，值)
## 11.v-model的本质

### 目标

学习v-model实现过程, 掌握更多用法

### 讲解

1. 新建src/components/Add组件, 准备实现双向数据绑定

   ```vue
<template>
  <div>
    <p>子组件库存: {{ value }}</p>
    <button @click="addFn">增加+1</button>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 0
    }
  },
  methods: {
    addFn() {
      this.$emit('input', this.value + 1)
    }
  }
}
</script>

   ```

2. 在App.vue, 准备变量传入组件中

   ```vue
   <template>
     <div>
       <span>父组件库存: {{ count }}</span>
       <hr>

       <AddBtn :value="count" @input="val => count = val"></AddBtn>

       <AddBtn v-model="count"></AddBtn>
     </div>
   </template>

   <script>
   import AddBtn from '@/components/Add'
   export default {
     data () {
       return {
         count: 10
       }
     },
     components: {
       AddBtn
     }
   }
   </script>

   <style>

   </style>

   ```

### 小结

1. v-model实际上实现的是什么?

   <details>
   <summary>答案</summary>
   <ol>
   <li>向标签内的value属性赋值</li>
   <li>给标签绑定input事件, 并把收到的值, 赋予给vue变量</li>
   </ol>
   </details>

##
====================================================================================================
如果找到标签与之对应代码
1.用类名/关键文字，放大镜搜索（如果有多个地方，一定要关联起来读读）
2.如果第一种翻遍了没有，那可能是后台返回的动态数据看network相关接口
3.既不是前端固定，也不是后台返回的文字，组件库内置的（包内置)
4.它有可能是图片

===================================================================================================
UI组件/其他插件使用套路
1.明确需求，目标，要知道自己想要什么效果的（组件库里找/githhub找/百度找/以前项目里找）
2.找组件：类似组件-->看看有没有官网（有最好），没看看npmjs.com/github.com上readme说明书
3.下载+引入组件：把组件弄到自己项目里，npm下载
4.用组件：把基础代码复制出来
5.读组件：把每个标签，嵌套关系，属性，事件，都写好注释弄明白----多看文档
6.改组件（改配置/属性/删除多余的）

*************************************************************************************************************************************************************
2022/1/15
*****************************************************************************************************************************************************************
概念：vued实例（new Vue或者每个组件对象）从创建到销毁的过程
钩子函数：（生命周期韩阿虎）组件对象在每个阶段会自动指向一些固定名字函数（通知我们到达了那个阶段）
每个钩子函数的特点
阶段:4大阶段
方法：8大方法
1.初始化（创建）阶段 beforeCreate  created
2.挂载阶段 beforeMount   mounted
3.更新阶段 beforeUpdate  updated
4.销毁阶段 beforeDestroy  destroyed

特点
beforeCreate（this实例上没有添加data/methode属性）
created（this实力上能防伪data和methodes里定义属性和方法）====造法早享受数据而且可以拿到data里的变量赋值
beforeMount（徐宁DOM还没有变成真实的DOM，不要在这里获取真实DOM,拿不到的）
mounted（想获取真实DOM标签，一般在这里获取）
当你的data里/计算属性/this实例里的变量发生变化的时候，执行更新的钩子函数
beforeUpdate（数据变化了，但是真实的DOM还没有更新）
updated(数据辩护了，真实的DOM更行完毕，会触发次函数)
当组件用v-if/调用组件$destroy()方法，当前组件会被从内存里销毁掉
前者DOM也一起没有，后者标签还在组件，对象没有了
beforeDestroy
destroyed应用：去掉当组件占用的全局资源（window.adDEventListeners就要在这个阶段销毁事件监听，计时器/定时器）

补充：3个方法
前提：当使用keep-alive缓存的组件，会新增2个钩子函数
activated--触发激活(切换回来)====类似created
deActivated---失去激活（被切走了）=====类似destroyed
注意：组件被缓存，created只走第一次，以后不在执行（所以用activated来代替created，监测组件回来）destroyed不会触发组件缓存不销毁，用deActivated来代替，监测此组件被切走
errorCapture偶尔用，捕获子组件里的报错

====== 为何props的变量, vue不建议我们修改
// 子组件自己修改此变量的值, 不会影响到父级
// 父级刷新此变量的值就会丢失, 变成父级传入的值
// 所以props一般是只读的(引用类型除外)
// 遵守: 单向数据流, 子里要改变父传来的props值, 要$emit技术
// 传递给父亲, 让父亲改变数据, 再重新单向流入到子组件内

// 改变props方式2种:
// 方式1: 转存到data变量上(你改变的时候只是改变组件内data, 父级数据没有受到影响)->偶尔用
// 方式2: 子传父技术, 父级把这个变量的值改变后再流会到props变量上 -> 常用

// .sync作用: 优化子传父的过程(父组件内不必再实现赋值过程, 但是如果父组件里需要复杂的操作, 那就还用原来的写法)
// 父传子
// (1): 子组件props: { num: Number }
// (2): 父组件 <子组件 num="myNum"></子组件>
// 以前子传父
// (1): 子组件内: this.$emit('自定义事件名', 100)
// (2): 父组件内: <子组件 @自定义事件名="事件处理函数"></子组件>
// 事件处理函数中, 给myNum = 100 -> myNum会流回到子组件props的num变量上
// 用了.sync修改上面的代码
// 父传子
// (1): 子组件props: { num: Number }
// (2): 父组件 <子组件 num="myNum"></子组件>
// 以前子传父(简化写法)
// (1): 子组件内: this.$emit('update:num', 100) 格式update:props变量名
// (2): 父组件内: <子组件 num.sync="myNum"></子组件>
// .sync相当于是一个语法糖 @update:num="值 => myNum = 值"

==============================（知识点8）==============================================

知识点：
属性值默认是字符串（别看是false但是也是字符串会判定为真）
字符创里只有'''为假
知识点：加冒号和不加冒号的区别
假冒好后面的值就是表达式（常量和变量）
不加冒号后面的值就是字符创

===========================================================================================
刷新token的思路
1.现在用，axios响应拦截器里，判断401，强制清除本地和vuex的token值，强制回到登录页面（用户有感知/让用户重新登录，拿到新的token）
2.无感知，aixos响应拦截器里，判断401，强制清除过期的vuex和本地的token值
前提：后端提供了刷新token接口，登入时，会给你返回2个token你（一个是普通用个的token，另一个叫refresh_ token值）调用刷新token接口，把refresh_ token传递给后台，换回一个新的token
而不必强制跳转页面，让用户登入。。。例如：微信
